<template>
  <l-data-panel v-if="data._isInit"  :label="config.title">
    <l-echarts ref="main" :option="option"></l-echarts>
  </l-data-panel>
</template>
<script>
import mixin from "../chart";
export default {
  mixins: [mixin()],
  data() {
    return {
      option: {
        radar: {},
        series: [
          {
            type: "radar",
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    getOption() {
      const { indicator, labelKey } = this.config;
      const { radius, symbol, isArea } = this.series.radar;
      // 数据配置
      const legendData = [];
      const series = [];

      const data = this.showData || [];

      if (labelKey) {
        data.forEach((item) => {
          const legendItem = { name: item[labelKey] };
          if (this.legend.itemIcon) {
            legendItem.icon = this.legend.itemIcon;
          }
          legendData.push(legendItem);
          const point = {
            name: item[labelKey],
            value: [],
          };

          // 标记形状
          if (symbol) {
            if(this.label.show){
              if(symbol !== 'none') {point.symbol = symbol}
            } else {
              point.symbol = symbol;
            }
          }

          // 是否区域填充
          if (isArea) {
            point.areaStyle = {};
          }

          indicator.forEach((indicatorItem) => {
            point.value.push(item[indicatorItem.valueKey] || 0);
          });
          if(indicator.length == 0){
            point.value = [0]
          }

          series.push(point);
        });
      }

      const { radar } = this.option;
      //雷达图的指示器 配置
      radar.indicator = indicator.map(({ name, max, color }) => ({
        name,
        max,
        color,
      }));

      if (radius > 0) {
        radar.radius = `${radius}%`;
      }

      // 文本标签设置
      this.option.series[0].label = this.getLabel(this.label);



      // 图例设置
      this.option.legend = this.getLegend();
      this.option.legend.data = legendData;
      this.option.series[0].data = series;

      // 颜色设置
      const color = this.getColors(this.echarts);
      if (color && color.length > 0) {
        this.option.color = color;
      }

      return this.option;
    },
  },
};
</script>

